<template>
  <div class="container">
    <el-dialog title="试题预览" :visible="showPreviewDialog" @close="close">
      <el-row>
        <el-col :span="6">【题型】：{{ questionType }}</el-col>
        <el-col :span="6">【编号】：{{ previewData.id }}</el-col>
        <el-col :span="6">【难度】：{{ difficult }}</el-col>
        <el-col :span="6">【标签】：{{ previewData.tags }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">【学科】：{{ previewData.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ previewData.directoryName }}</el-col>
        <el-col :span="6">【方向】：{{ previewData.direction }}</el-col>
      </el-row>
      <hr />
      <el-row>
        <span
          >【题干】:<span
            style="color: blue"
            v-html="previewData.question"
          ></span
        ></span>
        <div v-if="previewData.questionType === '1'">
          <div v-for="item in previewData.options" :key="item.id">
            <el-radio v-model="item.isRight" :label="1">
              {{ item.title }}
            </el-radio>
          </div>
        </div>
        <div v-if="previewData.questionType === '2'">
          <div v-for="(item, index) in previewData.options" :key="item.id">
            <el-checkbox v-model="options[index]">
              {{ item.title }}
            </el-checkbox>
          </div>
        </div>
      </el-row>
      <hr />
      <el-row>
        <span>【参考答案】:</span>
        <el-button type="danger" size="small" style="margin-left: 10px" @click="isShow =!isShow">
          视频答案预览
        </el-button>
         <div class="video" >
            <video controls="controls" v-show="isShow" :src="previewData.videoURL" class="video-shipin"></video>
         </div>
      </el-row>
      <hr />
      <el-row>
        <div class="answer">
          <div style="margin: 14px 0">【答案解析】：</div>
          <div v-html="previewData.answer"></div>
        </div>
      </el-row>
      <hr />
      <el-row>
        <div>【题目备注】：{{ previewData.remarks }}</div>
      </el-row>
      <el-row type="flex" justify="end" slot="footer">
        <el-button type="primary" @click="close">关闭</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    showPreviewDialog: {
      type: Boolean,
      default: false
    },
    previewData: {
      type: Object,
      default: () => {}
    },
    types: {
      type: String,
      default: '1'
    },
    difficulty: {
      types: String,
      default: '1'
    },
    options: {
      type: Array,
      require: () => []
    }
  },
  data() {
    return {
      isShow: false
    }
  },
  computed: {
    questionType() {
      if (this.types === '1') {
        return '单选'
      } else if (this.types === '2') {
        return '多选'
      } else {
        return '简答'
      }
    },
    difficult() {
      if (this.difficulty === '1') {
        return '简单'
      } else if (this.difficulty === '2') {
        return '一般'
      } else {
        return '困难'
      }
    }
  },
  created() {
    // console.log(this.options, 333)
    // this.options.map(item => item.isRight)
  },
  methods: {
    // 关闭弹层
    close() {
      this.isShow = !this.isShow
      this.$emit('update:showPreviewDialog', false)
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  .el-col {
    padding: 10px 0px;
  }
  .answer {
    display: flex;
  }
}
</style>
